<template>
  <div class="app-bg auto">
    <div class="auto" style="background:#108ADD;text-align:center; padding:10px 0px;color:#FFF;font-size: 18px;">
      博能燃气手机抄表
    </div>
      <div class="row app-input">
        <label class="col-xs-3 control-label text-left">户号</label>
        <input class="col-xs-3" v-model="model.f_userinfo_id" placeholder="请输入用户编号" disabled >
        <label class="col-xs-3 control-label text-left">姓名</label>
        <input class="col-xs-3" v-model="model.f_user_name" placeholder="请输入用户姓名" disabled >
      </div>
      <div class="row app-input">
        <label class="col-xs-3 control-label text-left">表位置</label>
        <input class="col-xs-3" v-model="model.f_position" placeholder="请输入表位置" disabled >
        <label class="col-xs-3 control-label text-left">表口径</label>
        <input class="col-xs-3" v-model="model.f_meter_bore" placeholder="请输入表口径" disabled >
      </div>
      <div class="row app-input">
        <label class="col-xs-3 control-label text-left">地址</label>
        <input class="col-xs-9" v-model="model.f_address" placeholder="请输入用户地址" disabled >
      </div>

      <div v-for='row in price'>
        <div class="row app-input">
          <label class="col-xs-3 control-label text-left">水价({{row.f_ratio}})</label>
          <input class="col-xs-9" v-model="row.f_describe" placeholder="请输入表口径" disabled >
        </div>
      </div>
      <div class="app-btn">
        <button type="button" name="button" class="btn btn-primary"  @click="this.$back()">
          <span  class="glyphicon glyphicon-remove-circle" style="margin-right: 15px;"></span>返回
        </button>
        <button type="button" name="button" class="btn btn-primary"  id="bt" @click="save()">
          <span  class="glyphicon glyphicon-floppy-disk" style="margin-right: 15px;" ></span>保存
        </button>
      </div>
      <!-- <div class="row app-input" style="margin-top: 10px;">
        <img  @click="takePic('f_meter_path', '抄表数据照片')"  :src="model.f_meter_path" alt="抄表照片" width="100" height="100">
        &nbsp;&nbsp;&nbsp;&nbsp;<span  class="glyphicon glyphicon-trash" @click="delfile('f_meter_path', this.model.f_meter_path)"></span>
      </div> -->
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left"> 用量</label>
        <input class="col-xs-8" v-model="model.f_oughtamount" disabled>
      </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left"> 上次缴费时间</label>
        <input class="col-xs-8" v-model="hand[0].f_delivery_date" disabled>
      </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left"> 上期指数</label>
        <input class="col-xs-8" v-model="model.f_last_tablebase" disabled>
      </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left"> 本期指数</label>
        <input class="col-xs-8" v-model="model.f_tablebase" placeholder="请输入用户本期指数">
      </div>
      <div class="flex-radio">
        <div class="">
          <input type="radio" v-model='model.f_reverse_state' value="0">
          <label for="">正常</label>
        </div>
        <div class="">
          <input type="radio" v-model='model.f_reverse_state' value="1">
          <label for="">反转</label>
        </div>
      </div>
    <div v-for='row in owe' class="app-panel">
      <accordion :one-at-atime="checked" type="info">
        <panel :is-open="false">
          <div slot="header" class="row">
            <span class="col-xs-3" style="color: red;">欠费:</span>
            <span class="col-xs-3" style="color: red;">{{row.f_oughtfee}}</span>
            <span class="col-xs-3">所属月份</span>
            <span class="col-xs-2">{{row.f_hand_date}}</span>
            <span class="col-xs-1 glyphicon glyphicon-menu-right"></span>
          </div>
          <div >
            <div class="row">
              <span class="col-xs-3">上指数</span><span class="col-xs-3">{{row.f_last_tablebase}}</span>
              <span class="col-xs-3">本指数</span><span class="col-xs-3">{{row.f_tablebase}}</span>
            </div>
            <div class="row">
              <span class="col-xs-3">水量</span><span class="col-xs-3">{{row.f_oughtamount}}</span>
              <span class="col-xs-3">金额</span><span class="col-xs-3">{{row.f_oughtfee}}</span>
            </div>
          </div>
        </panel>
      </accordion>
    </div>
      <div class="row app-input" style="margin-top: 10px;">
        <label class="col-xs-4 control-label text-left"> 备注</label>
      </div>
      <div class="row app-input">
          <textarea v-model="model.f_mark" class="form-control" id="div"
           style="width:100%;height:50%;font-size:1.5em;" placeholder='备注'></textarea>
      </div>
    <div class="app-btn">
      <button type="button" name="button" class="btn btn-primary" @click="claer()">
        <span class="glyphicon glyphicon-remove-circle" style="margin-right: 15px;"></span>取消
      </button>
      <button type="button" name="button" class="btn btn-primary" @click="confirm()">
        <span class="glyphicon glyphicon-floppy-disk" style="margin-right: 15px;"></span>交费
      </button>
    </div>
  </div>
</template>

<script>
import config from '../../../src/components/config'
import appData from '../../../src/components/appData'
import * as Util from '../Util'
import Vue from 'vue'
  import co from 'co'
let savedata = function * (self) {
  self.handplandata = Object.assign({}, self.handplandata, self.model)
    self.handplandata.f_haircut_water = 0
    self.handplandata.f_surplus_water = 0
    self.handplandata.f_inputtor  = appData.loginUser.logininfo[0].f_bieming
    self.handplandata.f_input_date = Util.toStandardDateString()
    self.handplandata.f_end_date = Util.toStandardDateString()
    self.handplandata.f_operator = appData.loginUser.logininfo[0].f_bieming
    self.handplandata.f_meter_state = '已抄表'
    self.handplandata.f_whether_pay = '否'
    self.handplandata.f_meter_base = self.model.f_last_tablebase
    self.handplandata.userfile ={
      f_user_id: self.model.f_user_id,
      f_meter_base: self.model.f_tablebase,
      version: self.model.version
    }
    self.handplandata.flag = false
    //self.handplandata.content = self.content
    //console.log('需要的路径'+ self.model.f_meter_path)
    //self.handplandata.f_meter_path = self.model.f_meter_path.substring(37,self.model.f_meter_path.indexOf('?'))
// config.resultUrl +
  yield self.$post( config.resultUrl +'rs/logic/pay', {data:self.handplandata},
  // yield self.$post( 'rs/logic/pay', {data:self.handplandata},
  {resolveMsg: null, rejectMsg: null})
    .then((res)=>{
      self.$showMessage('抄表数据上传成功')
      self.payfeestate = true
      console.log(self.alluser)
      for (var i = 0; i < self.alluser.length; i++) {
        console.log("表顺序号"+self.alluser[i].f_meterbook_number)
        console.log("表顺序号"+self.model.f_meterbook_number)
        if (self.alluser[i].f_meterbook_number === self.model.f_meterbook_number) {
            self.alluser.splice(i,1)
        }
      }


      self.model = ''
      //欠费列表
      self.owe = []
      // 价格记录
      self.price= [],
      // 抄表时间
      self.hand= [],
      // 抄表记录
      self.handplandata= ''
      self.model= {
        f_userinfo_id: '',
        f_reverse_state:'0',
        f_user_name: '',
        f_address:'',
        f_last_tablebase:'',
        f_tablebase: 0,
        f_mark:'',
        f_oughtamount:0,
        f_meter_path:''
      }
      if (self.alluser.length > 0) {
        self.model = Object.assign({}, self.model, self.alluser[0])
        self.getdata()
      } else {
        self.$showMessage('没有更多数据进行操作，请前往明细查看可操作数据')
      }


    })
    .catch ((ret)=>{
      self.payfeestate = true
     self.$showMessage('数据上传失败出错，检查网络，重新进行上传')
    })

}
export default {
  title: '抄表页面',
  props: ['row','userfiles'],
  data(){
    return{
      model: {
        f_userinfo_id: '',
        f_reverse_state:'0',
        f_user_name: '',
        f_address:'',
        f_last_tablebase:'',
        f_tablebase: 0,
        f_mark:'',
        f_oughtamount:0,
        f_meter_path:''
      },
      // 改册号下的所有用户
      alluser: [],
      //欠费列表
      owe: [],
      // 价格记录
      price: [],
      // 抄表时间
      hand: [],
      // 抄表记录
      handplandata: '',
      // 获取到的图片
      content: '',
      payfeestate: true

    }
  },
  ready (){
    this.model = Object.assign({}, this.model, this.row)
    this.alluser =  this.userfiles
    this.getdata()
  },
  watch: {
    'model.f_tablebase' (val) {
      if (this.model.f_last_tablebase >= val) {
        this.model.f_reverse_state = '1'
        this.model.f_oughtamount =  (this.model.f_last_tablebase - val).toFixed(2)

      } else {
        this.model.f_reverse_state = '0'
        this.model.f_oughtamount = (val - this.model.f_last_tablebase).toFixed(2)
      }
    }
  },
  methods: {
    //获取指定数据
    getdata() {
      this.$post(config.resultUrl +'rs/sql/oweinfo', {data: {f_userinfo_id: this.model.f_userinfo_id,f_user_id: this.model.f_user_id}},
      // this.$post('rs/sql/oweinfo', {data: {f_userinfo_id: this.model.f_userinfo_id,f_user_id: this.model.f_user_id}},
      {resolveMsg: null, rejectMsg: null})
      .then((res)=>{
        console.log(res.data)
        this.owe = res.data
      })
      .catch((ret)=>{
        this.$showMessage('获取欠费信息失败')
      })
      let condition = `1=1 and f_user_id= '${this.model.f_user_id}' and f_state = 1`
      this.$post(config.resultUrl +'rs/sql/singleTable_OrderBy', {data:{condition: condition,items: '*',tablename: 't_userprice',orderitem:'f_user_id'}},
      // this.$post('rs/sql/singleTable_OrderBy', {data:{condition: condition,items: '*',tablename: 't_userprice',orderitem:'f_user_id'}},
      {resolveMsg: null, rejectMsg: null})
      .then((res)=>{
        console.log(res.data)
        this.price = res.data
      })
      .catch((ret)=>{
        this.$showMessage('获取水价信息失败')
      })
      let con = `1=1 and id =(select max(id) from t_sellingwater where f_user_id = '${this.model.f_user_id}')`
      this.$post(config.resultUrl +'rs/sql/singleTable_OrderBy', {data:{condition: con ,items: 'f_delivery_date',tablename: 't_sellingwater',orderitem:'f_delivery_date'}},
      // this.$post('rs/sql/singleTable_OrderBy', {data:{condition: con ,items: 'f_hand_date',tablename: 't_handplan',orderitem:'f_hand_date'}},
      {resolveMsg: null, rejectMsg: null})
      .then((res)=>{
        console.log(res.data)
        this.hand = res.data
      })
      .catch((ret)=>{
        this.$showMessage('获取上次缴费时间日期失败')
      })
    },
    //拍照
    cameraCallBack(prop, fileName) {
      console.log(prop + ',' + fileName)
      HostApp.__this__.model[prop] = fileName + '?' + Math.random()
      console.log(HostApp.__this__.model[prop])
      HostApp.__callback__ = null
      HostApp.__this__ = null
    },
    takePic(prop, title) {
      HostApp.__callback__ = this.cameraCallBack
      HostApp.__this__ = this
      let fileName
      if(!this.model[prop] || !(prop.includes("nopic.png"))) {
        fileName = this.model.f_user_name + Util.guid() +'-meter-'+ prop + '.jpg'
      } else {
        fileName = Util.getFileName(this.model[prop])
      }
      HostApp._open_a_page({type: 'boomerang',
        page: 'com.aofeng.hybrid.android.peripheral.CameraActivity',
        param: {file: fileName,
          requestCode: 111,
           callback:'javascript:HostApp.__callback__("' + prop +'", "%s");',
            watermark: title + '\t时间：'+ Util.toStandardTimeString() + '\t' +
            this.model.f_user_name}
      })
    },
    //删除照片
    delfile(prop, fileName) {
      console.log(fileName)
      if(fileName == Vue.nopic)
        return
      else {
        HostApp.delfile(fileName)
        this.model[prop] = Vue.nopic
      }
    },
    //清除已填入信息
    claer(){
      this.$set("model.f_tablebase", 0)
      this.$set("model.f_mark", '')
    },
    //缴费
    confirm(){
      // if (this.model.f_meter_path && this.model.f_meter_path.includes("nopic.png")) {
      //   this.$showMessage("必须进行照相")
      //   return
      // }
      if (this.model.f_tablebase <= 0) {
        this.$showMessage("请输入本次抄表底数")
      }else {
        this.$goto('owe-info',{userinfo: this.model,price:this.price,flag: false})
      }

    },
    //保存抄表数据
    save() {
      // if (this.model.f_meter_path && this.model.f_meter_path.includes("nopic.png")) {
      //   this.$showMessage("必须进行照相")
      //   return
      // }
      if (this.model.f_tablebase <= 0) {
        this.$showMessage("请请输入本次抄表底数")
      }
      // let result = HostApp.context(this.model.f_meter_path)
      // if (result.code === 200) {
      //   this.content = result.result
      // } else {
      // HostApp.alert('提取图片数据失败')
      // return
      // }
      else {
        if (this.payfeestate) {
          this.payfeestate = false
          let gen = savedata(this)
          return co(gen)
        } else {
          this.$showMessage('重复提交请求，请等待返回结果')
        }
      }

    }
  }
}
</script>
<style>
  .flex-radio {
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
  }
  .app-panel .panel-default > .panel-heading {
    background: #FFF;
  }
  .app-panel {
    margin-top: 10px;
  }
  .app-panel .panel-group {
    margin: 0px;

  }
</style>
